<template>
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item class="searchInput">
          <el-input v-model="searchForm.name" placeholder="请输入菜单名称" clearable @keyup.enter.native="searchBtn" @change="searchBtn">
            <el-button slot="append" icon="el-icon-search" @click="searchBtn" />
          </el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="default" icon="icon icon-search2" @click="searchBtn">查询</el-button>
          <el-button type="default" icon="icon icon-refresh1" @click="handleReset">重置</el-button>
        </el-form-item> -->
      </el-form>
    </div>
    <div class="operation-tool">
      <el-button :loading="loadings" @click="delMenu">删除选择的数据</el-button>
      <el-button :loading="loadings" @click="syncDialog">同步后台菜单</el-button>
    </div>
    <div class="box-show marginTop" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table :loading="loading" :data="pageDatas" border :row-class-name="tableColor" :height="innerHeight" row-key="id" @selection-change="handleCheckChange">
        <el-table-column type="selection" reserve-selection :show-overflow-tooltip="true" width="50" />
        <el-table-column prop="name" label="功能名称" :show-overflow-tooltip="true" />
        <el-table-column prop="path" label="路由" :show-overflow-tooltip="true" />
        <el-table-column prop="component" label="组件" :show-overflow-tooltip="true" />
        <el-table-column prop="showIndex" label="排序" :show-overflow-tooltip="true" />
        <el-table-column prop="status" label="状态" :show-overflow-tooltip="true" /><!-- 0-停用，1-启用 -->
        <el-table-column prop="remark" label="备注" :show-overflow-tooltip="true" />
      <!-- <el-table-column fixed="right" label="操作" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="details(scope)">查看</el-button>
        </template>
      </el-table-column> -->
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <Menu v-if="visible" :visible="visible" :page-datas="pageDatas" @handleClose="handleClose" />
  </div>
</template>

<script>
import Menu from "./menu";
import { tableColor, labelHeigh } from '@/utils/common.js';
const defaultQueryForm = {
  name: "",
};
export default {
  components: { Menu },
  data() {
    return {
      searchForm: {},
      options: [],
      pageDatas: [],
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      addData: {}, // 添加数据
      selectData: [],
      tableColor,
      innerHeight: null,
      flag: true,
      title: "",
      testBtn: "",
      visible: false,
      show: true,
      widths: 50,
      loading: false,
      loadings: false,
    };
  },
  mounted() {
    this.getPageDatas();
    this.innerHeight = labelHeigh(this.$refs.search) - 30;
  },
  methods: {
    async getPageDatas() {
      this.loading = true;
      const res = await this.$api['data/menu/page']({ ...this.params, query: this.searchForm });
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询顾客列表失败！');
      this.pageDatas = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getPageDatas();
    },
    // 搜索
    searchBtn() {
      this.getPageDatas();
    },
    async edit() {
      this.visible = true;
    },
    // 详情
    async detailsBtn(row) {
      const res = await this.$api['data/menu/details']({ id: row.id });
      if (res.code !== 200) return this.$message.error('查看详情失败！');
      this.selectCustomersData = res.data;
      this.show = false;
      this.flag = false;
      this.widths = 70;
      this.visible = true;
    },
    handleCheckChange(s) {
      this.selectData = s;
    },
    delMenu() {
      if (this.selectData.length > 0) {
        const ids = [];
        this.selectData.map(menu => {
          ids.push(menu.id);
        });
        this.loadings = true;
        this.$crud.dels(
          'data/menu/batchdelete',
          { ids: ids },
          () => {
            this.loadings = false;
            this.searchBtn();
          },
          error => {
            console.error(error);
          }
        );
      }
    },
    async syncDialog() {
      // this.visible = true;
      this.loadings = true;
      const res = await this.$api['data/menu/synchronizationRabbitMenu']();
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success("同步成功");
      this.loadings = false;
    },
    handleClose() {
      this.visible = false;
    },
    handleReset() {
      this.searchForm = Object.assign({}, defaultQueryForm);
      this.handleQuery();
    },
  },
};
</script>
